<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="../../jquery-easyui-1.9.15/jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css" href="../../jquery-easyui-1.9.15/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../jquery-easyui-1.9.15/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../../jquery-easyui-1.9.15/demo/demo.css">
<style>
    .task-admin-topic-status table td{
        padding: 3em 6em;
    }
    .task-admin-topic-status table td label{
       padding-right: 2em;
    }

</style>
<script>
    $(function () {
        var index=0;
        var tableStr="";
        var $table = $(".task-admin-topic-status table");
        $.ajax({
            type:"POST",
            url:"/redisDelay/admin/queryAllTopicStatus",
            success:function(data){
                $.each(data,function(key,value){
                    if(index%2==0){
                        tableStr+='<tr>';
                    }
                    tableStr+='<td>';
                    tableStr+='<label>主题['+key+']:</label>';
                    if(value){
                        tableStr+='<input class="easyui-switchbutton" checked width="120px" data-options="onText:\'开启\',offText:\'停止\'" data-topic="'+key+'" onChange="changeSwitch(\'a\')">';
                    }else {
                        tableStr+='<input class="easyui-switchbutton" width="120px" data-options="onText:\'开启\',offText:\'停止\'" data-topic="'+key+'" onChange="changeSwitch(\"'+key+'\")">';
                    }
                    tableStr+='</td>';
                    if(index%2==1){
                        tableStr+='</tr>';;
                    }
                    index++;
                });
                $table.append(tableStr);
                $('.easyui-switchbutton').switchbutton({
                    onChange: function(checked){
                        var topic = $(this).data("topic");
                        var url=checked?'/redisDelay/admin/startTopic':'/redisDelay/admin/stopTopic'
                        $.ajax({
                            type: "POST",
                            url: url,
                            data:{
                                "topic":topic
                            },
                            success: function (data) {
                                console.info(data)
                            }
                        })
                    },

                })
                $.parser.parse($table);
        }
        });


        $('.easyui-switchbutton').switchbutton({
            onChange: function(checked){
                console.info($(this).data("topic"))
                $(this)
                alert(checked)
            },

        })
    })

    function changeSwitch(topic) {
        alert(topic)
    }
</script>

<body>
<div style="padding:5px;background:#fafafa;width:800px;border:1px solid #ccc" class="task-admin-topic-status">
    <table>
<!--        <tr>-->
<!--            <td>-->
<!--                <label>主题[TOPIC]:</label>-->
<!--                <input class="easyui-switchbutton" width="120px" data-options="onText:'开启',offText:'停止'" data-topic="ORDER" onChange="changeSwitch('ORDER')">-->
<!--            </td>-->
<!--            <td>-->
<!--                <label>主题[TOPIC]:</label>-->
<!--                <input class="easyui-switchbutton" width="120px" data-options="onText:'开启',offText:'停止'">-->
<!--            </td>-->
<!--        </tr>-->
<!--        <tr>-->
<!--            <td>-->
<!--                <label>主题[TOPIC]:</label>-->
<!--                <input class="easyui-switchbutton" width="120px" data-options="onText:'开启',offText:'停止'" data-topic="ORDER" onChange="changeSwitch('ORDER')">-->
<!--            </td>-->
<!--            <td>-->
<!--                <label>主题[TOPIC]:</label>-->
<!--                <input class="easyui-switchbutton" width="120px" data-options="onText:'开启',offText:'停止'">-->
<!--            </td>-->
<!--        </tr>-->

    </table>




</div>
</body>
</html>